<!-- 弹出框 -->
<template>
  <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
    <div class="dap-popover" v-show="centerPopoverVisible">
      <div class="dap-popover-wrapper">
        <ul class="popover-title" v-if="titleText">
          <li></li>
          <li>{{titleText}}</li>
          <li><img class="top-close-btn" src="../../assets/img/popover-close.png" alt=""
                   @click="clickRight"></li>
        </ul>
        <div class="popover-content" style="min-width:300px">
          <slot></slot>
        </div>
        <div class="btn-grounp" v-if="!hideBtn">
          <span class="dap-button" @click="clickLeft">{{leftBtnText}}</span>
          <span class="dap-close-button" @click="clickRight" v-if="!hideRightBtn">取消</span>
        </div>
      </div>
    </div>
  </transition>
</template>
<!-- 弹出窗组件 -->
<script>
  export default {
    name: "dapPopover",
    props: {
      // 左键文案
      leftBtnText: {
        default: '确定'
      },
      hideBtn: {
        default: false,
      },
      hideRightBtn: {
        default: false,
      },
      // 头部文案
      titleText: {},
    },
    data() {
      return {
        promise: null,
        centerPopoverVisible: false,
      };
    },
    methods: {
      clickLeft() {
        this.$emit('clickLeft');
      },
      clickRight() {
        this.$emit('clickRight');
        this.hide();
      },
      show() {
        this.centerPopoverVisible = true;
        return this.promise
      },
      hide() {
        this.centerPopoverVisible = false;
      }
    },
  }
</script>

<style scoped>
  .dap-popover {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  .dap-popover-wrapper {
    background-color: #1b2b44;
  }

  .popover-title {
    display: flex;
    justify-content: space-between;
    background-color: #2e3457;
    line-height: 40px;
    padding: 0 30px;
    border-radius: 4px;
    font-size: 14px;
  }

  .top-close-btn {
    cursor: pointer;
  }

  .btn-grounp {
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }

  .dap-close-button {
    margin-left: 22px;
  }
</style>
